<div class="container">
  <div class="user-list">
    <!-- 头部card -->
    <div class="top">
      <div class="list">人员列表</div>
      <div class="right">
        <div class="serach">
          <nz-input-group [nzSuffix]="suffixIconSearch" nzSearch=true>
            <input type="text" nz-input placeholder="输入搜索内容" [(ngModel)]="text" (keyup.enter)="serach()" name="name"
              (blur)="serach()" autocomplete="off" />
          </nz-input-group>
          <ng-template #suffixIconSearch>
            <i class="iconfont" [ngClass]="text ? 'icon-close-circle-line' : 'icon-search-line'"
              style="font-size: 12px; color: #C0C4CC;" (click)="clear()"></i>
          </ng-template>
        </div>
        <div class="dropdown">
          <i class="iconfont icon-menu-line" style="color: #1890ff;"></i>
          <nz-select [(ngModel)]="selecttext" nzAllowClear nzPlaceHolder="筛选" [nzOptions]="listOfOption"
            [nzShowArrow]="false" class="saixuan" [nzDropdownMatchSelectWidth]="true">
          </nz-select>
        </div>
        <button nz-button nzType="primary" nzValue="small" routerLink="addemployeeList">
          <span>+</span>&nbsp; 新建</button>
      </div>
    </div>
    <!-- 主体表格 -->
    <div class="main">
      <nz-table #basicTable nzLeft="20px" [nzLoading]="loading" [nzData]="userlist" [nzShowPagination]="false">
        <thead>
          <tr>
            <th nzWidth="5%" style="border: none;background-color: #fff;"></th>
            <th nzWidth="13%" style="background-color: #fff;">姓名</th>
            <th nzWidth="13%" style="background-color: #fff;">工号</th>
            <th nzWidth="15%" style="background-color: #fff;">部门</th>
            <th nzWidth="15%" style="background-color: #fff;">职务</th>
            <th nzWidth="15%" style="background-color: #fff;">联系方式</th>
            <th nzWidth="13%" style="background-color: #fff;">工作状态</th>
            <th nzWidth="10%" style="background-color: #fff;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of userlist">
            <td style="border: none; padding: 18px 36px 18px 0;">
              <img [src]="item.headerPhoto" alt="" *ngIf="item.headerPhoto">
            </td>
            <td style="padding-left: 20px;">{{item.name}}</td>
            <td>{{item.employeeNo}}</td>
            <td>
              {{item.departmentNode?item.departmentNode.nodeName:'' }}
            </td>
            <td>{{item.position}}</td>
            <td>{{item.phone}}</td>
            <td>
              <ng-container *ngIf="item.status == '0'">
                <nz-badge nzStatus="success" nzText="在岗"></nz-badge>
              </ng-container>
              <ng-container *ngIf="item.status == '1' ">
                <nz-badge nzStatus="error" nzText="请假"></nz-badge>
              </ng-container>
              <ng-container *ngIf="item.status == '2' ">
                <nz-badge nzStatus="default" nzText="离职"></nz-badge>
              </ng-container>
            </td>
            <td>
              <a nz-button nzType="link" (click)="editEmployee(item)">
                <i class="iconfont icon-edit-fill" Style="color: #1890ff; margin-right: 12px;"></i>
              </a>
              <a nz-button nzType="link" nz-popconfirm nzOverlayClassName="employee-del-confirm" nzPopconfirmTitle="确认删除此人员信息吗?" (nzOnConfirm)="deluer(item)"
                nzPopconfirmPlacement="topLeft">
                <i class="iconfont icon-delete-bin-line" Style="color: #FB5138;"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <div class="total">共 <span style="color: #1890ff">{{params.total}}</span> 条</div>
      <nz-pagination [nzPageIndex]="params.pageIndex" [nzTotal]="params.total" nzShowSizeChanger
        [nzPageSize]="params.countOfPage" (nzPageIndexChange)="changePageindex($event)"
        (nzPageSizeChange)="changePagesize($event)" [nzPageSizeOptions]="[10,20,30,40]">
      </nz-pagination>
    </div>
  </div>
</div>